<template>
  <div>
    <!-- 信息栏 -->
    <img class="system" :src="'./static/images/shop/decorate/header-' + systemType + '.png'" />
    <img
      v-if="platformType == 'WechatOfficialAccount'"
      class="WechatOfficialAccount"
      :src="'./static/images/shop/decorate/header-' + platformType + '.png'"
    />
    <!-- 头部数据 nav -->
    <navbar
      :compData="headerData.style"
      :platformType="platformType"
      :isScroll="isScroll"
      :templateDetailType="templateDetailType"
      :style="navStyle()"
    />
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import navbar from './navbar.vue';

  const props = defineProps([
    'headerData',
    'systemType',
    'platformType',
    'isScroll',
    'templateDetailType',
  ]);

  const sys = {
    ios: '78px',
    android: '72px',
  };

  function navStyle() {
    let mode = {};
    if (props.headerData && props.headerData.style) {
      if (props.headerData.style.navbar.mode == 'inner') {
        mode = {
          position: 'absolute',
          top: sys[props.systemType],
          left: 0,
          'z-index': 10,
        };
        // if (props.isScroll) {
          mode = {
            ...mode,
            background:
              props.headerData.style.navbar.type == 'color'
                ? props.headerData.style.navbar.color
                : props.headerData.style.navbar.src
                ? 'url(' + checkUrl(props.headerData.style.navbar.src) + ')'
                : props.headerData.style.navbar.src,
          };
        // }
      } else if (props.headerData.style.navbar.mode == 'normal') {
        mode = {
          background:
            props.headerData.style.navbar.type == 'color'
              ? props.headerData.style.navbar.color
              : props.headerData.style.navbar.src
              ? 'url(' + checkUrl(props.headerData.style.navbar.src) + ')'
              : props.headerData.style.navbar.src,
        };
      }
    }
    return mode;
  }
</script>

<style lang="scss" scoped>
  .WechatOfficialAccount {
    width: 100%;
    display: block;
  }
</style>
